<template>
  <el-card shadow="never">
    <el-row :gutter="20" class="calendarRow">
      <el-col v-for="(item,index) in dateList" :key="index" :span="8">
        <el-calendar :value="item">
          <template slot="dateCell" slot-scope="{date, data}">
            <p :style="style" @click="handleClick(date, data)">{{ data.day.split('-')[2] }}</p>
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      dateList: [],
      style: {
        color: 'red'
      }
    }
  },
  created() {
    const year = new Date().getFullYear()
    for (let i = 1; i < 13; i++) {
      this.dateList.push(new Date(`${year}-${i}-2`))
    }
  },
  methods: {
    handleClick(date, data) {
      this.$nextTick(() => {
        data.isSelected = !data.isSelected
        if (data.isSelected) {
          this.style = { color: 'red' }
        } else {
          this.style = {}
        }
        this.dateList.splice()
      })
      console.log('click', date, data)
    }
  }
}
</script>

<style scoped>
.is-selected {
  color: #1989fa;
}

.calendarRow >>> .el-calendar .el-calendar__button-group {
  display: none;
}

.calendarRow >>> .el-calendar-table .el-calendar-day {
  height: 50px;
}
</style>
